<template>
	<view>
		<view class="uni-padding-wrap">
			<view style="background:#FFF; padding:50upx 0;">
				<view class="uni-hello-text uni-center">支付金额</text></view>
				<view class="uni-h1 uni-center uni-common-mt">
					<text class="rmbLogo">￥</text>
					<input class="price" type="digit" :value="price" maxlength="4" @input="priceChange" />
				</view>
            </view>
            <view class="uni-btn-v uni-common-mt">
				<button type="primary" @click="doWeixinPay()" :loading="loading">微信支付</button>
            </view>
        </view>
		
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
	</view>
</template>

<script>
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiToast from "@/components/thorui/tui-toast/tui-toast"
		
	// 用户相关 登录注册什么的
	import wxjs from "../../libs/jweixin-1.5.0.js";

	let cf = {
	    h5Appid: 'wx03dcedad7b873692', // h5 appid
		h5RedirectUri: 'http://wz.syrcj.com/wx/we/oauth-callback-api', // h5 redirect_uri
	}
	
	export default {
		
		components: {
			tuiButton,
			tuiToast
		},

		data() {
			return {
				
				memberId: 0,
				openId: '',
				
				prepayId: 4,
				loading: false,
				price: 1,
				
				toastOk: {
					title: "支付成功",
					imgUrl: "/static/images/toast/check-circle.png",
					duration: 2000,
					icon: true
				},
				
				toastErr: {
					title: "操作失败",
					imgUrl: "/static/images/toast/fail-circle.png",
					duration: 2000,
					icon: true
				},
				
			}
		},
		
		onLoad: function(options) {
			this.prepayId = options.prepay_id || 0;
		},
	
		methods: {
			
			doWeixinPay: function() {
				this.wxH5Pay();
			},
			
			//跳转到订单中心
			goMyOrderIndex: function(){
				setTimeout(function(){
					uni.navigateTo({
						url: '/pages/my-order/index'
					});
				}, 3000);
			},
			
			//获取用户授权并返回code
			wxH5Oauth2() {
			    location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${cf.h5Appid}&redirect_uri=${cf.h5RedirectUri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
			},
			
			//微信H5支付https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
			wxH5Pay() {
				let that = this;

				uni.request({
					url: this.$apiUrl + '/wx/pay/pay-wx-h5',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
'shopId': uni.getStorageSync('shopId'),
					},
					data: {
						prepay_id: this.prepayId,
						open_id: uni.getStorageSync('openId'),
					},
					success: (res) => {
						
						let resData = res.data['data'];
						let resErr = res.data['error'];
						if(resErr == 0 ) {

							wxjs.chooseWXPay({
								appId: String(resData.appId),
								timestamp: String(resData.timestamp),
								nonceStr: String(resData.nonceStr),
								package: String(resData.package),
								signType: String(resData.signType),	// 'MD5'
								paySign: String(resData.paySign),
								success: function (res) {
									console.log('支付成功');
									that.$refs.toast.show(this.toastOk);
									this.goMyOrderIndex();
								},
								fail: function (res) {
									console.log('支付失败AAA');
									that.$refs.toast.show(this.toastErr);
									this.goMyOrderIndex();
								},
								cancel: function (res) {
									console.log('取消了支付BBBB');
									that.$refs.toast.show(this.toastErr);
									this.goMyOrderIndex();
								}
							});
						} else {
							console.log('请求支付数据失败AAA');
							that.$refs.toast.show(this.toastErr);
							this.goMyOrderIndex();
						}
					}
				});
			},
			
			
			//设置配置
			setConfig(config = {}) {
			    cf = com.deepCopy(Object.assign(cf, config));
			},
			
			//获取配置
			getConfig(config = {}) {
			    return cf
			},
			
			
			/**
			 * 微信H5配置
			 * @param {String} appId 公众号的唯一标识
			 * @param {String} timestamp 生成签名的时间戳
			 * @param {String} nonceStr 生成签名的随机串
			 * @param {String} signature 签名
			 * @param {Array} jsApiList 需要使用的JS接口列表
			 */
			wxh5SetConfig(appId, timestamp, nonceStr, signature, jsApiList) {
			    wxjs.config({
			        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			        appId, // 必填，公众号的唯一标识
			        timestamp, // 必填，生成签名的时间戳
					nonceStr, // 必填，生成签名的随机串
					signature,// 必填，签名
			        jsApiList: com.empty(jsApiList) ?
					[
						'updateAppMessageShareData',
						'updateTimelineShareData',
						'onMenuShareTimeline',
						'onMenuShareAppMessage',
						'onMenuShareQQ',
						'onMenuShareWeibo',
						'onMenuShareQZone',
						'startRecord',
						'stopRecord',
						'onVoiceRecordEnd',
						'playVoice',
						'pauseVoice',
						'stopVoice',
						'onVoicePlayEnd',
						'uploadVoice',
						'downloadVoice',
						'chooseImage',
						'previewImage',
						'uploadImage',
						'downloadImage',
						'translateVoice',
						'getNetworkType',
						'openLocation',
						'getLocation',
						'hideOptionMenu',
						'showOptionMenu',
						'hideMenuItems',
						'showMenuItems',
						'hideAllNonBaseMenuItem',
						'showAllNonBaseMenuItem',
						'closeWindow',
						'scanQRCode',
						'chooseWXPay',
						'openProductSpecificView',
						'addCard',
						'chooseCard',
						'openCard'
					]
					: jsApiList // 必填，需要使用的JS接口列表
			    });
			}
			
			
		},
		
		
	}
</script>

<style>
    .rmbLogo {
        font-size: 40upx;
    }

    button {
        background-color: #007aff;
        color: #ffffff;
    }

    .uni-h1.uni-center {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }

    .price {
        border-bottom: 1px solid #eee;
        width: 200upx;
        height: 80upx;
        padding-bottom: 4upx;
    }

    .ipaPayBtn {
        margin-top: 30upx;
    }
</style>